import React, { Component } from 'react'

export default class TabD extends Component {
    constructor() {
        super();
        // console.log("01-constructor");
    }
    state = {
        count: 100
    }
    //挂载完成后生命周期
    componentDidMount() {
        // console.log("03-componentDidMount");
        // console.log(this.countElement);
        let {count} = this.state
        this.timmer = setInterval(() => {
            console.log(count);
            this.setState({
                count:--count
            })
        }, 1000);
    }
    //state、props执行shouldComponentUpdate
    // shouldComponentUpdate(nextProps,nextState){
    //     console.log("04-shouldComponentUpdate");
    //     console.log(nextState);
    //     if(this.state.count == nextState.count){
    //         return false
    //     }
    //     return true
    // }
    // componentDidUpdate(){
    //     console.log("05-componentDidUpdate");
    // }

    componentWillUnmount(){
        console.log("06-componentWillUnmount");
        clearInterval(this.timmer)
    }
    
    render() {
        const { count } = this.state
        // console.log("02-render");
        return (
            <div>
                <h3>TabD</h3>
                <p ref={element=>this.countElement=element}>count:{count}</p>
                <button onClick={() => this.setState({ count: 200 })}>修改</button>
            </div>
        )
    }
}
